<template>
	<view>
		<!-- <image src="/static/common/bg.png" class="pagebg" mode=""></image> -->
		<u-navbar :safeAreaInsetTop="true" title="个人资料" autoBack :bgColor="'rgba(255,255,255,'+opc+')'" placeholder>
			<u-button slot='right' :customStyle="{width:'116rpx',height:'61rpx',padding:0,fontSie:'24rpx',margin:'0',}"
				shape='circle' color="#E3432D" text="保存" @click="save"></u-button>
		</u-navbar>
		<view class="pagecon">
			<u-upload :fileList="fileList" @afterRead="afterRead" name="6" :multiple="false" :maxCount="1">
				<view class="pagecon__tx">
					<image :src="model1.userInfo.avatar?model1.userInfo.avatar:'/static/goods/tx.png'"
						class="pagecon__tx__t" mode="aspectFill"></image>
					<image src="/static/personal/upbg.png" class="pagecon__tx__icon" mode=""></image>
				</view>
			</u-upload>
			<view class="">
				<u--form labelPosition="top" :model="model1" ref="uForm"
					:labelStyle="{color:'#606060',fontSize:'30rpx',margin:'0 0 0 13rpx'}" labelWidth='auto'>
					<u-form-item label="昵称" prop="userInfo.username" ref="item1">
						<u--input placeholderStyle='color:#9D9D9D;font-size:30rpx;' placeholder='昵称'
							v-model="model1.userInfo.username" border="surround" :customStyle="cstyle"></u--input>
					</u-form-item>
					<!-- 	<u-form-item label="姓名" prop="userInfo.name" ref="item1">
						<u--input placeholderStyle='color:#9D9D9D;font-size:30rpx;' placeholder='姓名'
							v-model="model1.userInfo.name" border="surround" :customStyle="cstyle"></u--input>
					</u-form-item> -->
					<u-form-item label="手机号" prop="userInfo.mobile" ref="item1">
						<u--input placeholderStyle='color:#9D9D9D;font-size:30rpx;' placeholder='请输入您的手机号'
							v-model="model1.userInfo.mobile" border="surround" :customStyle="cstyle"
							disabled></u--input>
					</u-form-item>
			<!-- 		<u-form-item label="个性签名" ref="item1">
						<u--textarea placeholderStyle='color:#9D9D9D;font-size:30rpx;' v-model="model1.userInfo.bio"
							placeholder="请输入您想说的话" :customStyle="cstyle"></u--textarea>
					</u-form-item> -->
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		profile,
		userInfo
	} from "@/request/api/my.js"
	export default {
		data() {
			return {
				fileList: [],
				opc: 0,
				model1: {
					userInfo: {
						username: '',
						mobile: '',
						bio: '',
						avatar: "",
					},
				},
				cstyle: {
					borderColor: '#E9EAEC!important',
					padding: '25rpx 50rpx',
					fontSize: '30rpx',
					borderRadius: '30rpx'
				}
			};
		},
		onLoad() {
			let uInfo = uni.getStorageSync("userInfo");
			this.model1.userInfo = uInfo;

		},
		methods: {
			save() {
				if (!this.model1.userInfo.username) {
					uni.$u.toast('请输入昵称');
					return
				}
				profile({
					...this.model1.userInfo
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						this.getInfo()
					}
				})
			},
			getInfo() {
				userInfo().then(res => {
					uni.setStorageSync('userInfo', res.data)
				})
			},
			async afterRead(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'http://ny.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model1.userInfo.avatar = json.data.fullurl;
						// that.fileList = [{
						// 	url: 'https://jie.fuliaoxx.com' + json.data
						// 		.url,
						// 	key: json.data
						// 		.url
						// }]
						uni.hideLoading()
					},
					complete(res) {
						// that.res = res;
						// uni.showModal({
						// 	content: res
						// })
					}
				})
			},
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
			} else {
				this.opc = 1
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
		overflow: auto;
	}

	.pagecon {
		padding: 72rpx 48rpx;

		&__tx {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 13rpx solid #fff;
			border-radius: 50%;
			box-shadow: 2rpx 0rpx 50rpx 0rpx #ccc;
			margin-left: 240rpx;
			margin-bottom: 50rpx;

			&__t {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}

			&__icon {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>